<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>AI交互式实验系统管理端</title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href='{{ static_url("bootstrap/css/bootstrap.min.css") }}' type="text/css" />
    <link rel="stylesheet" href="{{static_url('font-awesome/css/font-awesome.min.css')}}" type="text/css">
    <link rel="stylesheet" href='{{ static_url("css/sidebar.css") }}' type="text/css" />
    <link rel="stylesheet" href='{{ static_url("css/site.css") }}' type="text/css" />

    {% block stylesheet %} 
    {% end block %}

    <script src='{{static_url("js/jquery-1.10.2.min.js") }}'></script>
    <script src='{{static_url("bootstrap/js/bootstrap.min.js") }}'></script>
    <script src='{{static_url("js/knockout.js") }}' type="text/javascript"></script>
    <script src='{{static_url("js/bootbox.js") }}' type="text/javascript"></script> 
    <script>
        $(document).ready(function () {
            menu_tag = document.getElementsByTagName('meta')['menu-tag'].content;
            active_li = $($("#sidebar li[data-menu-tag="+menu_tag+"]")[0]);
            active_li.addClass('active');
            parent = active_li.parent();
            if (parent.prop("tagName") == 'UL' && parent.hasClass('collapse')){
                parent.addClass("in");
                parent.parent().addClass("active");
            }
        });
    </script>
    
    {% block meta %} 
    {% end block %}
</head>

<body>
    <!-- 页头开始 -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <span id="jupyterhub-logo" class="pull-left">
                    <a href="/">
                        <img src='{{static_url("images/logo.png")}}' class="logo" alt='AILab Logo' />
                    </a>
                </span>
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
                    data-target="#thenavbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="thenavbar">
                <ul class="nav navbar-nav">
                    <label class="navbar-text navbar-title">AI交互式实验系统-管理端</label>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        {% if user %}
                        <label class="navbar-text">欢迎你，{{ user['truename'] }}</label>
                        {% end if %}
                    </li>
                    <li>
                        <span id="login_widget">
                            {% if user %}
                            <a id="logout" role="button" class="navbar-btn btn-sm btn btn-default" href="/logout"> 
                                <i class="glyphicon glyphicon-log-out"></i> 注销</a>
                            {% else %}
                            <a id="login" role="button" class="btn-sm btn navbar-btn btn-default" href="/login">
                                <i class="glyphicon glyphicon-log-in"></i>
                                登录
                            </a>
                            {% end if %}
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 页头结束 -->
    
    <!-- 主体部分开始 -->
    <!-- 左侧导航栏开始 -->
    <div class="wrapper">
            <nav id="sidebar">
                <!-- <div class="sidebar-header">
                    <h4>管理工作台</h4>
                </div> -->
                <ul class="list-unstyled components">
                    <li data-menu-tag="11">
                        <a href="/">
                            <i class="glyphicon glyphicon-home"></i>
                            主页
                        </a>
                    </li>
                    <li>
                        <a href="#container" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                            <i class="glyphicon glyphicon-inbox"></i>
                            实验环境
                        </a>
                        <ul class="collapse list-unstyled" id="container">
                            <li data-menu-tag="21">
                                <a href="/docker_servers">服务器</a>
                            </li>
                            <li data-menu-tag="22">
                                <a href="/docker_images">镜像</a>
                            </li>
                            <li data-menu-tag="23">
                                <a href="/docker_services">容器</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#course" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                            <i class="glyphicon glyphicon-book"></i>
                            实验课程
                        </a>
                        <ul class="collapse list-unstyled" id="course">
                            <li data-menu-tag="31">
                                <a href="/lab_courses">课程列表</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#class" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                            <i class="glyphicon glyphicon-book"></i>
                            实验课堂
                        </a>
                        <ul class="collapse list-unstyled" id="class">
                            <li data-menu-tag="41">
                                <a href="/classes">班级</a>
                            </li>
                            <li data-menu-tag="42">
                                <a href="/students">学生</a>
                            </li>
                        </ul>
                    </li>           
                </ul>
            </nav>
            <!-- 左侧导航栏结束 -->
    
            <!-- 子页面正文部分开始 -->
            <div id="content" style="width: 100% !important; padding: 0">
                {% block main %} 
                {% end block %}
            </div>
            <!-- 子页面正文部分结束 -->
        </div>
        <!-- 主体部分结束 -->

    <!-- 页尾开始 -->
    <div class="container-fluid text-center">
        <hr /> 如有问题或建议，请联系：<a href='mailto:iahuohz@sina.com'>iahuohz@sina.com</a>
        <br />
        <br />
    </div>
    <!-- 页尾结束 -->

    {% block script %} 
    {% end block %}
</body>
</html>
